<!--
 * @Descripttion: 用户手册管理
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-10-21 13:33:50
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-04 17:48:40
-->
<template>
	<div class="handbooks">
		<el-form ref="queryForm" :inline="true" label-width="88px" style="overflow: hidden;">
			<el-form-item label="订单号">
				<el-input type="text" v-model="queryParams.orderNo" clearable />
			</el-form-item>
			<el-form-item label="sku">
				<el-input type="text" v-model="queryParams.sku" clearable />
			</el-form-item>
			<el-form-item label="批次号">
				<el-input type="text" v-model="queryParams.batchNumber" clearable />
			</el-form-item>
			<el-form-item label="收票人">
				<!-- <el-input type="text" v-model="queryParams.invoiceTaker" clearable /> -->
				<el-select v-model="queryParams.invoiceTaker" placeholder="请选择收票人" clearable filterable>
					<el-option v-for="item in takerArr" :label="item.invoiceTaker" :value="item.invoiceTaker">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="时间">
				<!-- <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="yyyy-MM-dd"
					placeholder="选择结束时间">
				</el-date-picker> -->
				<el-select v-model="queryParams.createTime" placeholder="请选择时间" clearable filterable>
					<el-option v-for="item in timeArr" :label="item" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button @click="getData()">搜索</el-button>
				<el-button @click="reset">重置</el-button>
				<el-button @click="exportOrder">导出excel</el-button>
				<el-button @click="exportZip">导出zip</el-button>
			</el-form-item>
		</el-form>
		<el-row class="handbooks-box">
			<el-table :data="list" border :header-cell-style="{background: '#f5f7fa'}" style="width: 100%;"
				:maxHeight="650">
				<el-table-column prop="批次号" label="批次号" fixed="left">
				</el-table-column>
				<el-table-column prop="订单号" label="订单号" fixed="left">
				</el-table-column>
				<el-table-column prop="发票号" label="发票号" fixed="left">
				</el-table-column>
				<el-table-column prop="项目经理" label="项目经理" fixed="left">
				</el-table-column>
				<el-table-column prop="收票人" label="收票人" fixed="left">
				</el-table-column>
				<el-table-column prop="总订单ID" label="总订单ID">
				</el-table-column>
				<el-table-column prop="订单子单号" label="订单子单号">
				</el-table-column>
				<el-table-column prop="订单状态" label="订单状态">
				</el-table-column>
				<el-table-column prop="电商订单编号" label="电商订单编号">
				</el-table-column>
				<el-table-column prop="商品编号" label="sku">
				</el-table-column>
				<el-table-column prop="订单名称" label="订单名称">
				</el-table-column>
				<el-table-column prop="商品名称" label="商品名称">
				</el-table-column>
				<el-table-column prop="下单时间" label="下单时间">
				</el-table-column>
				<el-table-column prop="产品种类" label="产品种类">
				</el-table-column>
				<el-table-column prop="供应商" label="供应商">
				</el-table-column>
				<el-table-column prop="加价前价格" label="加价前价格">
				</el-table-column>
				<el-table-column prop="加价前总价" label="加价前总价">
				</el-table-column>
				<el-table-column prop="发票打印地址" label="发票打印地址">
				</el-table-column>
				<el-table-column prop="发票打印电话" label="发票打印电话">
				</el-table-column>
				<el-table-column prop="发票类型" label="发票类型">
				</el-table-column>
				<el-table-column prop="备注" label="备注">
				</el-table-column>
				<el-table-column prop="开户行名称" label="开户行名称">
				</el-table-column>
				<el-table-column prop="开户行账号" label="开户行账号">
				</el-table-column>
				<el-table-column prop="开票单位名称" label="开票单位名称">
				</el-table-column>
				<el-table-column prop="成交单" label="成交单">
				</el-table-column>
				<el-table-column prop="成交总价" label="成交总价">
				</el-table-column>
				<el-table-column prop="联系人" label="联系人">
				</el-table-column>
				<el-table-column prop="手机号" label="手机号">
				</el-table-column>
				<el-table-column prop="收货地址" label="收货地址">
				</el-table-column>
				<el-table-column prop="招标公告时间" label="招标公告时间">
				</el-table-column>
				<el-table-column prop="数量单位" label="数量单位">
				</el-table-column>
				<el-table-column prop="未税单价" label="未税单价">
				</el-table-column>
				<el-table-column prop="未税总价" label="未税总价">
				</el-table-column>
				<el-table-column prop="税率" label="税率">
				</el-table-column>
				<el-table-column prop="结算方式" label="结算方式">
				</el-table-column>
				<el-table-column prop="规格型号" label="规格型号">
				</el-table-column>
				<el-table-column prop="账号" label="账号">
				</el-table-column>
				<el-table-column prop="运费" label="运费">
				</el-table-column>
				<el-table-column prop="采购人" label="采购人">
				</el-table-column>
				<el-table-column prop="采购单位" label="采购单位">
				</el-table-column>
				<el-table-column prop="采购数量" label="采购数量">
				</el-table-column>
				<el-table-column prop="采购预算" label="采购预算">
				</el-table-column>
				<el-table-column prop="导入时间" label="导入时间">
				</el-table-column>
			</el-table>
			<!-- 
			<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
	  	@pagination="getData" /> -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-size="pageSize" layout=" ->, total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import fileUpdata from "@/api/file.config";
	import {
		deleteFile
	} from "@/api/common.api"
	import {
		selInvoiceReconciliationToManagerName,
		exportInvoiceReconciliationToManagerName,
		sqlInvoiceTaker,
		downloadZip,
		sqlHandleTime
	} from '@/api/admin.api'
	import {
		getUserInfoByToken
	} from '@/api/mall.api'
	export default {
		data() {
			return {
				fileHeaders: fileUpdata.headers(),
				fileUrl: "/vapi/excel/import/importInvoiceReconciliation",
				fileList: [],
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNo: '',
					sku: '',
					managerName: '',
					invoiceTaker: '',
					createTime: '',
					batchNumber: ''
				},
				takerArr: [],
				name: '',
				timeArr: []
			};
		},
		mounted() {
			this.sqlHandleTime();
			this.getData()
			this.getList();
			this.getUserInfo();
		},
		methods: {
			sqlHandleTime() {
				var that = this;
				var arr = [];
				sqlHandleTime().then((res) => {
					for (var i = 0; i < res.length; i++) {
						arr.push(res[i].handleDate);
					}
					that.timeArr = arr;
				})
			},
			getUserInfo() {
				var that = this;
				getUserInfoByToken({
					account:localStorage.getItem("account")
				}).then((res)=>{
					that.name = res.name;
				})
			},
			getList() {
				var that = this;
				sqlInvoiceTaker().then(res => {
					that.takerArr = res;
					console.log(that.takerArr);
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					orderNo: '',
					sku: '',
					managerName: '',
					invoiceTaker: '',
					createTime: '',
					batchNumber: ''
				}
			},
			exportZip() {
				if (this.queryParams.createTime == '') {
					this.$message({
						type: 'error',
						message: '请选择时间!'
					});
					return
				}
				downloadZip({
					name: this.name,
					date: this.queryParams.createTime
				}).then(res => {
					const blob = new Blob([res], {
						type: 'application/zip'
					})
					this.saveAs(blob, '导出.zip')
				})
			},
			exportOrder() {
				exportInvoiceReconciliationToManagerName(this.queryParams).then(res => {
					const blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '导出.xlsx')
				})
			},
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val
				this.getData()
			},
			handleCurrentChange(val) {
				this.queryParams.pageNum = val
				this.getData()
			},
			// 上传成功
			handleAvatarSuccess(res) {

				if (res && res.code === 200) {
					this.$message({
						message: '上传成功',
						type: 'success'
					})
					this.fileList = []
					this.getData()
				}
			},
			//  上传失败
			handleAvatarError(err) {
				this.$message({
					message: '上传失败',
					type: 'warning'
				})
			},
			// 下载
			download(item) {
				window.open(item.url)
			},
			// 查询列表
			getData() {
				selInvoiceReconciliationToManagerName(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			// 删除
			deleteItem(item) {
				this.$confirm('确定删除文件', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteFile(10, item.id).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getData()
					})

				});
			}
		},
	};
</script>

<style scoped lang='scss'>
	.handbooks {
		.title {
			margin: 10px 0;
			// font-weight: bold;
			text-align: left;
		}

		.upload-box {
			margin-top: 30px;
			text-align: center;
		}
	}
</style>
